<html>
<head>

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.9.1.boxsocial.min.js"></script>
<script type="text/javascript" src="scripts/raphael-min.js"></script>
<script type="text/javascript" src="scripts/colorwheel.js"></script>

<style type="text/css">
    .textbox
    {
        position: relative;
        padding: 0;
        margin: 0;
    }
    
    .textbox input[type="text"]
    {
        width: 60px;
        border: solid 1px black;
        padding: 4px;
        margin: 0;
    }
    
    input[type="text"].colorwheelinput
    {
        width: 101px;
        border-right: none;
    }
    
    .colorwheel 
    {
        background-color: White;
        position: absolute;
        left: 100px;
        top: 0;
        width: 100px;
        height: 100px;
        border: solid 1px black;
        padding: 5px;
        display: none;
        z-index: 1000;
        border-radius: 5px;
        border-top-left-radius: 0;
    }
</style>

<script type="text/javascript">
<!--
    function ShowColorWheel(node) {
        HideColorWheel();
        node.children(".colorwheel").show();
        var cw = Raphael.colorwheel(node.children(".colorwheel")[0], 100);
        cw.input(node.children("input")[0]);
        node.children("input").addClass('colorwheelinput');
    }

    function HideColorWheel() {
        $(".colorwheel").hide().html('');
        $(".textbox input").removeClass('colorwheelinput');
    }

    $(document).ready(function () {
        $("body").click(function (event) {
            HideColorWheel();s
        });

        $(".textbox *").click(function (event) {
            event.stopPropagation();
        });
    });
-->
</script>
</head>
<body>
<div class="textbox">
<input type="text" onclick="ShowColorWheel($(this).parent());" /> <div class="colorwheel"></div>
</div>
<br />
<div class="textbox">
<input type="text" onclick="ShowColorWheel($(this).parent());" /> <div class="colorwheel"></div>
</div>
</body>
</html>